<template>
  <div id="nav">
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link>
    <modal />
    
    <Suspense>
      <template #default>
        <AsyncShow />
      </template>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>

    <Suspense>
      <template #default>
          <GirlShow />
      </template>
    </Suspense>
    <Suspense>
      <template #fallback>
        <h1>Loading...</h1>
      </template>
    </Suspense>
  </div>
  <router-view/>
</template>
 
<script lang="ts">
import { nowTime, getNowTime } from "./hooks/useNowTime";
import modal from "./components/Modal.vue";
import AsyncShow from "./components/AsyncShow.vue";
import GirlShow from "./components/GirlShow.vue";
import { ref, onErrorCaptured } from "vue";
export default {
  name: 'App',
  setup () {
    onErrorCaptured ((error) => {
      console.log(`error ===>`, error);
      return true;
    });

    return {
      nowTime,
      getNowTime
    }

  },

  components: {
    modal,
    AsyncShow,
    GirlShow
  }
  
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>
